<template>
  <section class="sample-section"  v-loading.lock="loading" element-loading-text="拼命加载中">
    <el-form :model="data" :rules="dataRule" ref="dataForm" label-width="160px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>登录信息</span>
        </div>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="登录手机号" prop="username">
              <el-input v-model="data.username" placeholder="登录手机号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="登录密码">
              <el-input v-model="data.password" type="password" placeholder="登录密码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>企业信息 （为保障您的账号安全，请认真填写以下信息，且认证通过后不可更改）</span>
        </div>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="企业名称" prop="title">
              <el-input v-model="data.title" placeholder="企业名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="企业简称">
              <el-input v-model="data.simple_title" placeholder="企业简称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="固定电话">
              <el-input v-model="data.company_tel" placeholder="固定电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="纳税人识别号">
              <el-input v-model="data.tax_number" placeholder="纳税人识别号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="营业执照">
              <el-upload :action="getUrl('license')"
                         :headers="{ token: $cookie.get('token') }"
                         :file-list="data.licenseList"
                         :limit="1"
                         :before-upload="beforeUploadHandle"
                         :before-remove="beforeRemove"
                         :on-success="uploadSetingSuccess"
                         list-type="picture-card"  :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="true">
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="注册地址">
              <el-input v-model="data.address" placeholder="注册地址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="联系人姓名">
              <el-input v-model="data.contact" placeholder="联系人姓名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="联系人电话">
              <el-input v-model="data.contact_phone" placeholder="联系人电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>法人信息 （为保障您的账号安全，请认真填写以下信息，且认证通过后不可更改）</span>
        </div>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="真实姓名">
              <el-input v-model="data.legal_person" placeholder="真实姓名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="身份证号码">
              <el-input v-model="data.legal_person_card" placeholder="身份证号码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="身份证正面照片">
              <el-upload :action="getUrl('id_card_front')"
                         :headers="{ token: $cookie.get('token') }"
                         :file-list="data.cardFrontList"
                         :limit="1" :before-upload="beforeUploadHandle" :before-remove="beforeRemove" :on-success="uploadSetingSuccess" list-type="picture-card"  :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="true">
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="身份证反面照片">
              <el-upload :action="getUrl('id_card_reverse')"
                         :headers="{ token: $cookie.get('token') }"
                         :file-list="data.cardReverseList"
                         :limit="1"
                         :before-upload="beforeUploadHandle"
                         :before-remove="beforeRemove" :on-success="uploadSetingSuccess" list-type="picture-card"  :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="true">
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>银行账户信息</span>
        </div>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="开户行全称">
              <el-input v-model="data.bank_title" placeholder="开户行全称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="银行账号">
              <el-input v-model="data.bank_number" placeholder="银行账号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="开户行所在地">
              <el-input v-model="data.bank_address" placeholder="开户行所在地"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>企业基础服务</span>
        </div>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="合作类型" prop="company_vocational_id">
              <el-select v-model="data.company_vocational_id" placeholder="请选择合作类型">
                <el-option
                  v-for="item in vocationals"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="6" :xl="6">
            <el-form-item label="信息服务费率" prop="rate">
              <el-input v-model="data.rate" placeholder="信息服务费率"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="结算类型">
              <el-select v-model="data.rate_type" placeholder="结算类型">
                <el-option
                  v-for="item in rate_types"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
            <el-form-item label="所属代理商">
              <el-select v-model="data.agent_id" placeholder="所属代理商">
                <el-option label="请选择代理商" :value="0"></el-option>
                <el-option
                  v-for="agent in agent_list"
                  :key="agent.id"
                  :label="agent.title"
                  :value="agent.id">
                </el-option>
              </el-select>
              <span class="danger-text" style="padding-left: 10px;">注:代理商绑定完成无法修改</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 图片预览 -->
      <el-dialog :visible.sync="dialogVisible">
        <div style="text-align: center; width: 100%;">
          <img style="width: 100%;  height: 100vh;" :src="dialogImageUrl" alt="">
        </div>
      </el-dialog>

      <el-row :gutter="10" class="item-row">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item>
            <el-button type="warning" @click="dataFormSubmit()" :disabled="submit">保存信息</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </section>
</template>

<script>
  export default {
    data () {
      return {
        loading: true,
        data: {
          id: 0,
          username: '',
          password: '',
          title: '',
          simple_title: '',
          company_tel: '',
          tax_number: '',
          license: '',
          licenseList: [],
          address: '',
          contact: '',
          contact_phone: '',
          legal_person: '',
          legal_person_card: '',
          id_card_front: '',
          cardFrontList: [],
          id_card_reverse: '',
          cardReverseList: [],
          bank_title: '',
          bank_number: '',
          bank_address: '',
          rate: '',
          rate_type: 1,
          company_vocational_id: 1,
          agent_id: '',
        },
        agent_list : [],
        vocationals: [{
          value: 1,
          label: '技术服务',
        },{
          value: 2,
          label: '咨询服务',
        },{
          value: 3,
          label: '网络主播',
        },{
          value: 4,
          label: '设计',
        }],
        rate_types: [{
          value: 1,
          label: '支付金额',
        },{
          value: 2,
          label: '结算金额',
        }],
        submit: false,
        dialogVisible: false,
        dataRule: {
          username : [
            { required: true, message: '登录手机号', trigger: 'blur' }
          ],
          title : [
            { required: true, message: '企业名称', trigger: 'blur' }
          ],
          company_vocational_id : [
            { required: true, message: '合作类型', trigger: 'blur' }
          ],
          rate : [
            { required: true, message: '服务费费率', trigger: 'blur' }
          ],
        }
      }
    },
    mounted () {
    },
    activated () {
      this.loading = false
      this.init()
    },
    methods: {
      init () {
        this.$http({
          url: this.$http.adornUrl('/agent/list'),
          method: 'get',
          params: this.$http.adornParams()
        }).then((res) => {
          this.agent_list = res.data.list
        })
      },
      // 表单提交
      dataFormSubmit () {
        console.log(this.data)
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/company/create`),
              method: 'post',
              data: this.$http.adornData(this.data)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '录入成功',
                  type: 'success',
                  duration: 1500
                })
                this.$parent.$parent.$parent.$parent.tabsCloseCurrentHandle()
                this.$router.push({ name: 'company-list'})
              } else {
                this.$message.error(data.msg)
              }
            }).catch((error) => {
              this.$message.error('请求异常')
            })
          }
        })
      },
      getUrl(type) {
        return this.$http.adornUrl(`/sys/oss/upload?type=` + type)
      },
      // 上传之前
      beforeUploadHandle (file) {
        if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
          this.$message.error('只支持jpg、png、gif格式的图片！')
          return false
        }
        if(file.size > 3 * 1024 * 1024) {
          this.$message.error('只支持3M以内的文件上传！')
          return false
        }
      },
      uploadSetingSuccess(res, file) {
        if(file.response.code !== 0) {
          this.$message.error(file.response.msg);
          return false
        }
        if(file.response.type === 'license') {
          this.data.license = file.response.url;
        } else if (file.response.type === 'id_card_front') {
          this.data.id_card_front = file.response.url;
        } else if (file.response.type === 'id_card_reverse') {
          this.data.id_card_reverse = file.response.url;
        }
      },
      beforeRemove(file, fileList) {
        if(file.percentage > 0) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        }
        return true;
      },
      handleRemove(file, fileList) {
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .box-card {
    margin-bottom: 20px;
  }
</style>

